<template>
  <div class="accountinterestapply">
    <!-- <h5>按年度计息</h5>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed="left" label="操作" width="60">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >计息</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="date" label="年份" width="180"> </el-table-column>
      <el-table-column prop="name" label="已计息人数" width="180">
      </el-table-column>
      <el-table-column prop="address" label="已计息金额"> </el-table-column>
      <el-table-column prop="address" label="未计息人数"> </el-table-column>
    </el-table> -->
    <!-- <h5>计息申请记录</h5> -->
    <el-table
      :data="tableData"
      border
      style="width: 1745px"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :row-style="{ height: '48px' }"
      fit
      height="calc(100vh - 110px)"
    >
      <el-table-column fixed="left" label="操作" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.aryId == 0"></div>
          <div v-if="scope.row.aryId == 1">
            <el-button @click="insert(scope.row)" type="text" size="small"
              >计息</el-button
            >
          </div>
          <div v-if="scope.row.aryId == 2">
            <el-button @click="delete_(scope.row)" type="text" size="small"
              >删除</el-button
            >
            <el-button type="text" @click="update_(scope.row)" size="small"
              >提交</el-button
            >
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="ID" label="单据号" width="100"></el-table-column> -->
      <el-table-column prop="ReviewResult" label="申请状态" width="180">
        <template slot-scope="scope">
          <div v-if="scope.row.ID == 0">未计息</div>
          <div v-if="scope.row.ReviewResult == 0 && scope.row.ID != 0">
            未提交
          </div>
          <div v-if="scope.row.ReviewResult == 1 && scope.row.ID != 0">
            待审核
          </div>
          <div v-if="scope.row.ReviewResult == 2 && scope.row.ID != 0">
            未通过
          </div>
          <div v-if="scope.row.ReviewResult == 9 && scope.row.ID != 0">
            审核通过
          </div>
          <div v-if="scope.row.ReviewResult == 10 && scope.row.ID != 0">
            已到账
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="InterestYear" label="年度" width="100">
      </el-table-column>
      <el-table-column prop="Demandrate" label="活期利率" width="100">
        <template slot-scope="scope">
          <div>
            {{ (scope.row.Demandrate * 100).toFixed(2) + "%" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="Fixedrate" label="定期利率" width="100">
        <template slot-scope="scope">
          <div>
            {{ (scope.row.Fixedrate * 100).toFixed(2) + "%" }}
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="Interested" label="计息人数">
        <template slot-scope="scope">
          {{ Number(scope.row.Interested) + Number(scope.row.NoInterest) }}
        </template>
      </el-table-column> -->
      <el-table-column prop="InterestMoney" label="计息金额" width="110">
        <template slot-scope="scope">
          <div v-if="scope.row.ID == 0"></div>
          <div v-if="scope.row.ID != 0">
            {{ number_format(scope.row.InterestMoney, 2) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="InterestNum" label="计息人数" width="110">
        <template slot-scope="scope">
          <div v-if="scope.row.ID == 0"></div>
          <div v-if="scope.row.ID != 0">{{ scope.row.InterestNum }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="OperName" label="申请人" width="100">
      </el-table-column>
      <el-table-column prop="OperTime" label="申请时间" width="180">
        <template slot-scope="scope">{{
          formatDate(scope.row.OperTime)
        }}</template>
      </el-table-column>
      <!-- <el-table-column prop="ReviewResult" label="审核状态"></el-table-column> -->
      <el-table-column
        prop="ReviewName"
        label="审核人"
        width="100"
      ></el-table-column>
      <el-table-column prop="ReviewTime" label="审核时间" width="180">
        <template slot-scope="scope">{{
          formatDate(scope.row.ReviewTime)
        }}</template>
      </el-table-column>
      <el-table-column
        prop="FinanceName"
        label="到账人"
        width="100"
      ></el-table-column>
      <el-table-column prop="FinanceTime" label="到账时间" width="180">
        <template slot-scope="scope">{{
          formatDate(scope.row.FinanceTime)
        }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="预览" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.InterestMoney > 0">
            <el-button
              @click="handleCurrentChange(scope.row)"
              type="text"
              size="small"
              >预览</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="账户计息详情"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-table
        fit
        :data="tableList"
        border
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :row-style="{ height: '48px' }"
        height="450"
      >
      <el-table-column type="index" label="序号" width="60" fixed="left">
        </el-table-column>
        <el-table-column prop="Village" label="乡镇" width="150">
        </el-table-column>
        <el-table-column prop="Township" label="村"> </el-table-column>
        <!-- <el-table-column prop="YearNum" label="年度"></el-table-column> -->
        <el-table-column prop="ProjectName" label="项目名称" width="126">
        </el-table-column>
        <el-table-column prop="socialsecuritytype" label="参保类型" width="120">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.socialsecuritytype == 0">其他</span>
              <span v-else-if="scope.row.socialsecuritytype == 1">城居保</span>
              <span v-else-if="scope.row.socialsecuritytype == 2">职保</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Name" label="姓名"></el-table-column>
        <el-table-column prop="Gender" label="性别"></el-table-column>
        <el-table-column
          prop="Identitynum"
          label="身份证号"
          width="180"
        ></el-table-column>
        <!-- <el-table-column prop="InterestYear" label="计息年度"></el-table-column> -->
        <el-table-column prop="InterestMoney" label="年度余额" width="99">
          <template slot-scope="scope">
            <div>
              {{ number_format(scope.row.InterestMoney, 2) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Money" label="年度利息"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  API_INSET_V,
  API_INSET_YEAR,
  API_INSET_YI,
  API_INSET_UP,
  API_INSET_DE,
  API_INSET_COM,
  API_INSET_ID,
} from "../../api/account";
export default {
  name: "",
  data() {
    return {
      msg: "平均年度工资记录",
      dialogVisible: false,
      dialogVisibleadd: false,
      labelPosition: "right",
      tableData: [],
      tableList: [],
      /* 修改 */
      inputyear: "",
      interest: "",
      fixedinterest: "",
      allinterest: "",
      /* 新增 */
      addinputyear: "",
      addinterest: "",
      addfixedinterest: "",
      addallinterest: "",
      /* 分页 */
      currentPage4: 1,
      currentRow: null,
      showInfo: true,
      drawer: false,
      dialogVisible: false,
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleCloseadd() {
      this.$confirm("确认增加？")
        .then((_) => {
          // done();
          this.dialogVisibleadd = false;
        })
        .catch((_) => {});
    },
    calculation() {
      console.log("101");
    },
    calculationadd() {
      console.log("增加101");
    },
    /* 分页 */
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    // },
    handleCurrentChange(val) {
      // this.currentRow = val;
      // console.log(val);
      this.dialogVisible = true;
      let data = {
        ID: val.ID,
      };
      API_INSET_ID(data)
        .then((res) => {
          console.log(res);
          this.tableList = res.ResList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClick(row) {
      console.log(row);
    },
    onsubmit() {
      API_INSET_V()
        .then((res) => {
          console.log(res);
          let ary = res.ResList;
          ary.map((item, index) => {
            item.aryId = 0;
            if (this.showInfo) {
              var myDate = new Date();
              var tYear = myDate.getFullYear();
              if (Number(item.InterestYear) >= Number(tYear)) {
                item.aryId = 0;
              } else {
                if (Number(item.ID) == 0) {
                  item.aryId = 1;
                  this.showInfo = false;
                } else {
                  if (item.ReviewResult == 0 || item.ReviewResult == 2) {
                    item.aryId = 2;
                    this.showInfo = false;
                  } else if (item.ReviewResult == 1 || item.ReviewResult == 9) {
                    item.aryId = 0;
                    this.showInfo = false;
                  } else if (
                    item.ReviewResult == 10 ||
                    item.ReviewResult == 11
                  ) {
                    item.aryId = 0;
                  }
                }
              }
            } else {
              item.aryId = 0;
            }
            console.log(item.InterestYear);
            // if (item.ReviewResult == 2 || item.ReviewResult == 0) {
            //   item.aryId = 2;
            // }
            // if (item.OperName == null) {
            //   item.aryId = 0;
            // }
            // let Dinfo = ary.find((item) => item.ID == 0);
            // if (Dinfo != undefined) {
            //   Dinfo.aryId = 1;
            // }
            // if (index != 0) {
            //   console.log(ary[index]);
            //   console.log(item);
            //   if (
            //     ary[index - 1].ReviewResult != 9 ||
            //     ary[index - 1].ReviewResult != 10
            //   ) {
            //     item.aryId = 0;
            //   } else {
            //     item.aryId = 1;
            //   }
            // }
          });
          this.tableData = ary;
          // console.log(ary);
          console.log(this.showInfo);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    formatDate(time) {
      if (time != "") {
        if (time.toString().substr(6, 13) < 0) {
          return "";
        } else {
          return this.timeD(new Date(parseInt(time.toString().substr(6, 13))));
        }
      }
    },
    timeD(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    // 金额格式化
    number_format(number, decimals, dec_point, thousands_sep) {
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       *
       */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point,
        s = "",
        toFixedFix = function (n, prec) {
          var k = Math.pow(10, prec);
          return "" + parseInt(n * k) / k;
        };
      s = (prec ? toFixedFix(n, prec) : "" + parseInt(n)).split(".");
      var re = /(-?\d+)(\d{3})/;
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || "";
        s[1] += new Array(prec - s[1].length + 1).join("0");
      }
      return s.join(dec);
    },
    // 计息
    insert(row) {
      let data = {
        InterestYear: row.InterestYear,
      };
      API_INSET_COM(data)
        .then((res) => {
          console.log(res);
          row.InterestMoney = res.ResList;
          this.$message.success("计息成功！");
          this.onsubmit();
          console.log("刷新");
          this.showInfo = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除
    delete_(row) {
      let data = [
        {
          ID: row.ID,
        },
      ];
      API_INSET_DE(data)
        .then((res) => {
          console.log(res);
          this.$message.success("删除成功！");
          this.onsubmit();
          this.showInfo = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 提交
    update_(row) {
      let data = {
        InterestYear: row.InterestYear,
      };
      API_INSET_UP(data)
        .then((res) => {
          console.log(res);
          this.$message.success("提交成功！");
          this.onsubmit();
          this.showInfo = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.onsubmit();
  },
};
</script>

<style scoped lang="scss">
.accountinterestapply {
  box-sizing: border-box;
  padding: 30px;
  .el-row {
    text-align: right;
  }
  .el-pagination {

    max-width: 1200px;
    text-align: right;
  }
  ::v-deep .el-table {
    th {
      padding: 0px !important;
      height: 48px;
      line-height: 48px;
    }
    td {
      padding: 0px !important;
      height: 48px;
      line-height: 48px;
    }
  }
  ::v-deep .el-dialog {
    .el-dialog__body {
      height: 509px;
    }
  }
}
</style>